<template>
	<div class="powerEquipment-container">
		<div class="page-header">
			<h2>电力设备管理</h2>
		</div>

		<!-- 搜索筛选区域 -->
		<div class="search-container">
			<el-form :inline="true" :model="searchForm" class="search-form">
				<el-form-item label="设备名称">
					<el-input style="width: 200px" v-model="searchForm.equipmentName" placeholder="请输入设备名称"
						clearable></el-input>
				</el-form-item>

				<el-form-item label="设备编号">
					<el-input style="width: 200px" v-model="searchForm.equipmentCode" placeholder="请输入设备编号"
						clearable></el-input>
				</el-form-item>

				<el-form-item label="设备类型">
					<el-select style="width: 120px" v-model="searchForm.equipmentType" placeholder="请选择设备类型" clearable>
						<el-option v-for="type in powerEquipmentTypes" :key="type.value" :label="type.label"
							:value="type.value"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="设备状态">
					<el-select style="width: 120px" v-model="searchForm.status" placeholder="请选择状态" clearable>
						<el-option label="正常" :value="0"></el-option>
						<el-option label="停用" :value="1"></el-option>
						<el-option label="检修" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="额定功率">
					<div style="display: flex; align-items: center; gap: 8px;">
						<el-input-number v-model="searchForm.ratedPowerMin" placeholder="最小功率" :min="0"
							style="width: 120px;"></el-input-number>
						<span>-</span>
						<el-input-number v-model="searchForm.ratedPowerMax" placeholder="最大功率" :min="0"
							style="width: 120px;"></el-input-number>
					</div>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="handleSearch">搜索</el-button>
					<el-button @click="handleReset">重置</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!-- 数据操作区域 -->
		<div class="action-container">
			<el-button type="primary" @click="handleAdd">
				<el-icon>
					<Plus />
				</el-icon>
				<span>新增设备</span>
			</el-button>
		</div>

		<!-- 列表展示区域 -->
		<div class="table-container">
			<el-table v-loading="loading" :data="powerEquipmentList" style="width: 100%">
				<el-table-column prop="id" label="ID" width="80"></el-table-column>
				<el-table-column prop="equipmentName" label="设备名称" width="180"></el-table-column>
				<el-table-column prop="equipmentCode" label="设备编号" width="150"></el-table-column>
				<el-table-column prop="powerZoneName" label="所属区域" width="150"></el-table-column>
				<el-table-column prop="ratedPower" label="额定功率" width="150"></el-table-column>
				<el-table-column prop="equipmentType" label="设备类型" width="100">
					<template #default="{ row }">
						{{ formatType(row.equipmentType) }}
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" width="80">
					<template #default="{ row }">
						<el-tag :type="row.status === 0
							? 'success'
							: row.status === 1
								? 'warning'
								: 'danger'
							">{{ formatStatus(row.status) }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column label="操作" fixed="right">
					<template #default="{ row }">
						<el-button size="small" @click="handleView(row)">查看</el-button>
						<el-button size="small" type="primary" @click="handleEdit(row)">编辑</el-button>
						<el-button size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页组件 -->
		<div class="pagination-container">
			<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
				:page-sizes="[2, 10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total" @size-change="handleSizeChange"
				@current-change="handleCurrentChange"></el-pagination>
		</div>

		<!-- 查看详情对话框 -->
		<el-dialog v-model="viewDialogVisible" title="查看设备详情" width="600px" :close-on-click-modal="false">
			<el-descriptions :column="1" border>
				<el-descriptions-item label="ID">
					{{ viewForm.id }}
				</el-descriptions-item>
				<el-descriptions-item label="设备名称">
					{{ viewForm.equipmentName }}
				</el-descriptions-item>
				<el-descriptions-item label="设备编号">
					{{ viewForm.equipmentCode }}
				</el-descriptions-item>
				<el-descriptions-item label="所属区域">
					{{ viewForm.powerZoneName }}
				</el-descriptions-item>
				<el-descriptions-item label="设备类型">
					{{ formatType(viewForm.equipmentType) }}
				</el-descriptions-item>
				<el-descriptions-item label="安装位置">
					{{ viewForm.location }}
				</el-descriptions-item>
				<el-descriptions-item label="额定功率">
					{{ viewForm.ratedPower }}
				</el-descriptions-item>
				<el-descriptions-item label="状态">
					<el-tag :type="viewForm.status === 0
						? 'success'
						: viewForm.status === 1
							? 'warning'
							: 'danger'
						">{{ formatStatus(viewForm.status) }}</el-tag>
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>

		<!-- 编辑对话框 -->
		<el-dialog v-model="editDialogVisible" title="编辑设备" width="600px" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="120px">
				<el-form-item label="设备名称" prop="equipmentName" required>
					<el-input v-model="editForm.equipmentName" placeholder="请输入设备名称" maxlength="50"></el-input>
				</el-form-item>

				<el-form-item label="设备编号" prop="equipmentCode" required>
					<el-input v-model="editForm.equipmentCode" placeholder="请输入设备编号" maxlength="50"></el-input>
				</el-form-item>

				<el-form-item label="所属区域" prop="powerZoneName" required>
					<el-input v-model="editForm.powerZoneName" placeholder="请输入所属区域" maxlength="100"></el-input>
				</el-form-item>

				<el-form-item label="设备类型" prop="equipmentType" required>
					<el-select v-model="editForm.equipmentType" placeholder="请选择设备类型">
						<el-option v-for="type in powerEquipmentTypes" :key="type.value" :label="type.label"
							:value="type.value"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="安装位置" prop="location" required>
					<el-input v-model="editForm.location" placeholder="请输入安装位置" maxlength="200"></el-input>
				</el-form-item>

				<el-form-item label="额定功率" prop="ratedPower" required>
					<el-input v-model="editForm.ratedPower" placeholder="请输入额定功率" maxlength="20"></el-input>
				</el-form-item>

				<el-form-item label="设备状态" prop="status" required>
					<el-radio-group v-model="editForm.status">
						<el-radio :label="0">正常</el-radio>
						<el-radio :label="1">停用</el-radio>
						<el-radio :label="2">检修</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>

			<template #footer>
				<el-button @click="editDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveEdit" :loading="editLoading">保存</el-button>
			</template>
		</el-dialog>

		<!-- 新增对话框 -->
		<el-dialog v-model="addDialogVisible" title="新增设备" width="600px" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="120px">
				<el-form-item label="设备名称" prop="equipmentName" required>
					<el-input v-model="addForm.equipmentName" placeholder="请输入设备名称" maxlength="50"></el-input>
				</el-form-item>

				<el-form-item label="设备编号" prop="equipmentCode" required>
					<el-input v-model="addForm.equipmentCode" placeholder="请输入设备编号" maxlength="50"></el-input>
				</el-form-item>

				<el-form-item label="所属区域" prop="powerZoneId" required>
						<el-select
							v-model="addForm.powerZoneId"
							placeholder="请选择所属区域"
							clearable
						>
							<el-option
								v-for="zone in powerZoneOptions"
								:key="zone.value"
								:label="zone.label"
								:value="zone.value"
							></el-option>
						</el-select>
					</el-form-item>

				<el-form-item label="设备类型" prop="equipmentType" required>
					<el-select v-model="addForm.equipmentType" placeholder="请选择设备类型">
						<el-option v-for="type in powerEquipmentTypes" :key="type.value" :label="type.label"
							:value="type.value"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="安装位置" prop="location" required>
					<el-input v-model="addForm.location" placeholder="请输入安装位置" maxlength="200"></el-input>
				</el-form-item>

				<el-form-item label="额定功率" prop="ratedPower" required>
					<el-input v-model="addForm.ratedPower" placeholder="请输入额定功率" maxlength="20"></el-input>
				</el-form-item>

				<el-form-item label="设备状态" prop="status" required>
					<el-radio-group v-model="addForm.status">
						<el-radio :label="0">正常</el-radio>
						<el-radio :label="1">停用</el-radio>
						<el-radio :label="2">检修</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>

			<template #footer>
				<el-button @click="addDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveAdd" :loading="addLoading">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
import { onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { usePowerEquipment } from "../hooks/usePowerEquipment";
const {
	loading,
	// 设备列表
	powerEquipmentList,
	LoadingPowerEquipmentList,
	// 查看设备详情
	viewDialogVisible,
	viewForm,
	handleView,
	// 删除设备
	handleDelete,
	// 编辑设备
	editDialogVisible,
	editForm,
	saveEdit,
	handleEdit,
	powerEquipmentTypes,
	editLoading,
	// 搜索表单
	searchForm,
	// 搜索
	handleSearch,
	// 重置搜索
	handleReset,
	// 分页信息
	pagination,
	// 分页切换
	handleCurrentChange,
	handleSizeChange,

	// 新增设备
	addDialogVisible,
	addForm,
	handleAdd,
	addLoading,
	saveAdd,
	// 区域选项
	powerZoneOptions,
	// 格式化方法
	formatType,
	formatStatus,
} = usePowerEquipment();
onMounted(() => {
	LoadingPowerEquipmentList();
});
</script>

<style scoped>
.powerEquipment-container {
	padding: 20px;
	background-color: #fff;
	min-height: calc(100vh - 40px);
}

.page-header {
	margin-bottom: 20px;
}

.page-header h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 500;
	color: #303133;
}

.search-container {
	background-color: #f5f7fa;
	padding: 16px;
	margin-bottom: 20px;
	border-radius: 4px;
}

.search-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.action-container {
	margin-bottom: 20px;
	display: flex;
	justify-content: flex-end;
}

.table-container {
	margin-bottom: 20px;
}

.pagination-container {
	display: flex;
	justify-content: flex-end;
}

/* 响应式调整 */
@media (max-width: 768px) {
	.powerEquipment-container {
		padding: 10px;
	}

	.search-form {
		flex-direction: column;
		align-items: stretch;
	}

	.search-form .el-form-item {
		margin-right: 0;
	}

	.el-table {
		font-size: 12px;
	}

	.el-table-column--selection {
		width: 40px !important;
	}

	.el-table .el-button {
		padding: 4px 8px;
		font-size: 12px;
	}
}
</style>
